<template>
    <div>
        菜谱标题: <input type="text" v-model="ps.name">
        分类: <select v-model="ps.id">
                    <option value="">请选择</option>
                    <option :value="o.cid" v-for="o in sa" :key="o.cid">{{ o.cname }}</option>
                </select>
        <input type="button" value="查询" @click="show()">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>菜谱标题</td>
                    <td>分类</td>
                    <td>标签</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>详情</td>
                    <td>时间</td>
                </tr>
                 <tr v-for="o in data" :key="o.sid">
                    <td>{{o.sname}}</td>
                    <td>{{o.cname}}</td>
                    <td>{{o.bname}}</td>
                    <td><img :src="o.tu" width="100px" height="100px" ></td>
                    <td>{{o.flag==1?"已发布":"未发布"}}</td>
                    <td>{{o.xq}}</td>
                    <td>{{o.date.substring(0,10)}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import moment from 'moment';
import axios from 'axios';
import { onMounted, ref} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import router from '@/router';
let ps:any = ref({
    name:'',
    id:''
})
let sa:any = ref()
let data:any=ref()
onMounted(()=>{
    show()
    lie()
})
const show=()=>{
    axios({
        url:'https://localhost:7265/api/Shi/ShiDTOs',
        method:"get",
        params:ps.value
    })
    .then(res=>{
        data.value = res.data
    })
}
const lie=()=>{
    axios({
        url:'https://localhost:7265/api/Shi/Cais',
        method:"get"
    })
    .then(res=>{
        sa.value = res.data
    })
}
</script>

<style scoped>

</style>